<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <!-- 
  响应式懒加载图片元素
  - class="lazy"：标识需要懒加载的图片
  - data-src：真实图片URL（替代src属性）
  - data-srcset：响应式图片源集合
  - data-sizes：图片显示尺寸规则
  - src：占位图（小尺寸、低质量或纯色图片）
  - alt：无障碍访问必备属性
-->
<img class="lazy" 
     data-src="high-quality-image.jpg" 
     data-srcset="./js/重点/图片懒加载的实现方式/11.png 480w, ./js/重点/图片懒加载的实现方式/11.png 768w, ./js/重点/图片懒加载的实现方式/11.png 1200w"
     data-sizes="(max-width: 600px) 480px, (max-width: 1200px) 768px, 1200px"
     src="./js/重点/图片懒加载的实现方式/11.png"
     alt="响应式懒加载示例图片">
</body>
<style>
 /* 懒加载图片的基础样式 */
.lazy {
  /* 防止图片加载时的布局抖动 */
  display: block;
  width: 100%;
  height: auto;
  
  /* 添加加载过渡效果 */
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 图片加载完成后的样式 */
.lazy.loaded {
  opacity: 1;
}

/* 占位图样式（可选） */
.placeholder {
  background-color: #f0f0f0;
  background-image: linear-gradient(45deg, #ddd 25%, transparent 25%, 
                    transparent 75%, #ddd 75%, #ddd),
                  linear-gradient(45deg, #ddd 25%, transparent 25%, 
                    transparent 75%, #ddd 75%, #ddd);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
}
</style>
<script>
  // 等待DOM完全加载后执行
  document.addEventListener('DOMContentLoaded', function() {
    // 获取所有需要懒加载的图片元素
    const lazyImages = document.querySelectorAll('img.lazy');
    console.log('lazyImages', lazyImages)
     // 检查浏览器是否支持Intersection Observer API
    if ('IntersectionObserver' in window) {
      // 创建IntersectionObserver实例
      const imageObserver = new IntersectionObserver(function(entries, observer) {
           // 遍历所有观察的条目
          entries.forEach(function(entry) {
            if (entry.isIntersecting) {
              const lazyImage = entry.target;
              // 替换src和srcset属性
              if (lazyImage.dataset.src) {
                lazyImage.src = lazyImage.dataset.src;
              }
              if (lazyImage.dataset.srcset) {
                lazyImage.srcset = lazyImage.dataset.srcset;
              }
              if (lazyImage.dataset.sizes) {
                lazyImage.sizes = lazyImage.dataset.sizes;
              }
              // 添加loaded类以触发CSS过渡效果
              lazyImage.classList.add('loaded');
              // 停止观察该图片（已经加载完成）
              imageObserver.unobserve(lazyImage);
            }
          },{
            // 配置选项：在图片进入视口前200px就开始加载
            rootMargin: '200px 0px',
            threshold: 0.01
          })
      })
      // 开始观察所有懒加载图片
      lazyImages.forEach(function(lazyImage) {
        imageObserver.observe(lazyImage);
      });
    } else {
        // 不支持Intersection Observer的降级方案
        console.warn('Intersection Observer not supported, using fallback');
        // 简单的滚动事件监听实现
        let active = false;

         const lazyLoadFallback = function() {
          if (active === false) {
             active = true;
              // 使用setTimeout进行节流处理
              setTimeout(function() {
                lazyImages.forEach(function(lazyImage) {
                  if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && 
                  lazyImage.getBoundingClientRect().bottom >= 0) &&
                  getComputedStyle(lazyImage).display !== 'none') {
                    // 加载图片
                    lazyImage.src = lazyImage.dataset.src;
                    if (lazyImage.dataset.srcset) {
                      lazyImage.srcset = lazyImage.dataset.srcset;
                    }
                    lazyImage.classList.add('loaded');
                    // 从数组中移除已加载图片
                    lazyImages = Array.prototype.filter.call(lazyImages, function(image) {
                      return image !== lazyImage;
                    });
                    
                    if (lazyImages.length === 0) {
                      // 所有图片加载完成后移除事件监听
                      document.removeEventListener('scroll', lazyLoadFallback);
                      window.removeEventListener('resize', lazyLoadFallback);
                      window.removeEventListener('orientationchange', lazyLoadFallback);
                    }
                  }
                })
                active = false;
              }, 200)
          }
         }

        // 添加事件监听
        document.addEventListener('scroll', lazyLoadFallback);
        window.addEventListener('resize', lazyLoadFallback);
        window.addEventListener('orientationchange', lazyLoadFallback);
        
        // 初始加载
        lazyLoadFallback();
    }
  })

//   关键点解释
//         Intersection Observer配置：

//         rootMargin: '200px 0px' - 在图片进入视口前200px就开始加载

//         threshold: 0.01 - 当图片1%可见时触发回调

//         响应式图片处理：

//         同时处理data-src、data-srcset和data-sizes属性

//         确保浏览器能根据视口大小选择最合适的图片源

//         用户体验优化：

//         使用CSS过渡效果使图片加载更平滑

//         占位图防止布局抖动

//         降级方案确保在不支持的浏览器中仍能工作

//         性能优化：

//         图片加载后取消观察

//         降级方案中使用节流技术减少滚动事件处理频率
</script>
</html>